<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="lib/vue.min.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/user0">user0</router-link>
    <router-link to="/user1">user1</router-link>
    <router-link to="/user2">user2</router-link>
    <router-link to="/user3">user3</router-link>
<!--    命名路由-->
    <router-link :to="{name:'user',params:{id:1000}}">user1000</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>

<script>
    const User={
        props:['id','uname','age'],
        template:`
        <div>
            <h1>USER 组件---用户ID为：{{$route.params.id}}---{{id}}--姓名为:{{uname}}---年龄为：{{age}}</h1>
            <button @click="goRegister">跳转到注册页面</button>
        </div>
        `,
        methods:{
            goRegister() {
                this.$router.push('/register')
            }
        }
    }
    const Register={
        template:`
        <div>
            <h1>register 组件</h1>
            <hr>
            <router-link to="/register/tab1">tab1</router-link>
            <router-link to="/register/tab2">tab2</router-link>
            <router-view></router-view>
            <button @click="goBack">后退</button>
        </div>
        `,
        methods:{
            goBack(){
                this.$router.go(-1)
            }
        }
    }
    const Tab1={
        template:'<h3>Tab1子组件</h3>'
    }
    const Tab2={
        template:'<h3>Tab2子组件</h3>'
    }
    const router=new VueRouter({
        routes:[
            {path:'/',redirect:'/user'},
            // {path:'/user:id',component:User,props:true},
            // {path:'/user:id',component:User,props:{uname:'zhangsan',age:20}},
            {
                path:'/user:id',
                component:User,props:route=>({uname:'zs',age:20,id:route.params.id}),
                name:'user'
            },
            {
                path:'/register',
                name:'register',
                component:Register,
                children:[
                    {path:'/register/tab1',component:Tab1},
                    {path:'/register/tab2',component:Tab2}
                ]
            }
        ]
    })
    const vm = new Vue({
        el: '#app',
        router
    })
</script>
</body>
</html>
